<template>
    <div>
      <!-- 地图区域 -->
      <div id="container" style="height:200px; border:1px solid #666;"></div>
      <el-divider content-position="left">商铺列表</el-divider>
      <!-- 表格数据 -->
      <el-table :data="store">
        <el-table-column sortable prop="store_name" label="商铺名称" width="250px">
          <template slot-scope="scope">
            <i class="el-icon-video-camera"></i>
            {{ scope.row.store_name }}
          </template>
        </el-table-column>
        <el-table-column label="商铺详细地址">
          <template slot-scope="scope">
            <i class="el-icon-s-flag"></i>
            {{ scope.row.address }}
          </template>
        </el-table-column>
        <el-table-column label="商铺位置" width="230px">
          <template slot-scope="scope">
            {{ scope.row.province }}
            {{ scope.row.city }}
            {{ scope.row.district }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="230px">
          <template slot-scope="scope">
            <el-button @click="moveTo(scope.$index)" size="small" type="info" icon="el-icon-position" circle></el-button>
            <!-- <el-button @click="$router.push(`/home/cinema-room-list/${scope.row.id}`)" size="small" type="success"
              icon="el-icon-thumb" circle></el-button> -->
  
            <el-button size="small" type="warning" icon="el-icon-edit" circle></el-button>
            <el-button size="small" type="danger" icon="el-icon-delete" circle @click="deleteshop(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </template>
  
  <script>
  import httpApi from '@/http';
  import AMapLoader from '@amap/amap-jsapi-loader';
  
  export default {
  
    data() {
      return {
        store: [], // 商铺列表
      }
    },
  
    mounted() {
      this.liststore();
    },
  
    methods: {
      deleteshop(id){
        console.log(id)
        httpApi.shoppaddApi.deleteshop(id).then(res=>{
          console.log('删除结果',res)
        })
        this.liststore()
      },

  
      /** 将地图中心点移动到某一个商铺的位置 */
      moveTo(index) {
        let c = this.store[index]
        let position = [c.longitude, c.latitude] // 坐标
        console.log(position)
        if (this.map) {
          this.map.setZoomAndCenter(14, position)
        }
      },
  
      /** 初始化地图 */
      initMap() {
        AMapLoader.load({
          key: "7bfbe3ab215345f405c23b5eed760ca8",             // 申请好的Web端开发者Key，首次调用 load 时必填
          version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          plugins: ['AMap.Geocoder'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        }).then((AMap) => {
          this.map = new AMap.Map("container", {  //设置地图容器id
            viewMode: "3D",    //是否为3D地图模式
            zoom: 11,           //初始化地图级别
            center: [116.397509, 39.907644], //初始化地图中心点位置
          });
          // 给每一个电影院都添加点标记
          console.log('显示所有影院的点标记', this.store)
          this.store.forEach(item => {
            let lng = item.longitude
            let lat = item.latitude
            // 创建点标记 Marker显示在地图上
            let marker = new AMap.Marker({
              position: [lng, lat],
              title: item.store_name
            });
            this.map.add(marker)
          })
  
        }).catch(e => {
          console.log(e);
        })
      },
  
      /** 列出所有影院 */
      liststore() {
        httpApi.shoppaddApi.queryAll().then(res => {
          console.log('加载所有影院', res)
          this.store = res.data
          // 初始化地图
          this.initMap();
        })
      }
    },
  };
  </script>
  
  <style lang="scss" scoped></style>